﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Font</title>
    <link type="text/css" href="../base.css" rel="stylesheet">
    <link type="text/css" href="index.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="body">
    <h1 class="page-title">Serif vs. Sans Serif</h1>

    <p class="serif">
        Vue.js是由尤雨溪（Evan You）于2014年2月发布的渐进式JavaScript框架，基于标准HTML、CSS和JavaScript构建，采用MIT开源协议并由社区驱动维护。
    </p>
    <p class="sans">
        Vue.js是由尤雨溪（Evan You）于2014年2月发布的渐进式JavaScript框架，基于标准HTML、CSS和JavaScript构建，采用MIT开源协议并由社区驱动维护。
    </p>
</div>


<div class="body">
    <h1 class="page-title">Font family</h1>

    <p class="new-font">
        Vue.js是由尤雨溪（Evan You）于2014年2月发布的渐进式JavaScript框架，基于标准HTML、CSS和JavaScript构建，采用MIT开源协议并由社区驱动维护。
    </p>

</div>

<div class="body">
    <h1 class="page-title">Font Style</h1>

    <p class="font-style">
        Vue.js是由尤雨溪（Evan You）于2014年2月发布的渐进式JavaScript框架，基于标准HTML、CSS和JavaScript构建，采用MIT开源协议并由社区驱动维护。
    </p>
    <p class="font-style2">
        Vue.js是由尤雨溪（Evan You）于2014年2月发布的渐进式JavaScript框架，基于标准HTML、CSS和JavaScript构建，采用MIT开源协议并由社区驱动维护。
    </p>
</div>


<div class="body">
    <h1 class="page-title">Font Size</h1>
    <p class="height1">80px</p>
    <p class="height2">50px</p>
    <p class="height3">30px</p>
    <p class="height4">14px</p>
    <p class="height5">10px</p>
</div>


<div class="body">
    <h1 class="page-title">Font Weight</h1>

    <p class="new-font-weight">
        Vue.js是由尤雨溪（Evan You）于2014年2月发布的渐进式JavaScript框架，基于标准HTML、CSS和JavaScript构建，采用MIT开源协议并由社区驱动维护。
    </p>
    <div class="roboto weight900">weight900</div>
    <div class="roboto weight800">weight800</div>
    <div class="roboto weight700">weight700</div>
</div>


<div class="body">
    <h1 class="page-title">Font Variant</h1>

    <p class="new-font-variant">
        I am learning css html h5 JS TS and so on
    </p>
</div>

<div class="body">
    <h1 class="page-title">Font Awesome</h1>
    <i class="fa-solid fa-user"></i>

</div>

</body>
</html>